<template>
  <div>
    <el-row class="block-col-2">
      <el-col :span="24">
        <el-dropdown>
          <span class="el-dropdown-link">
            <b style="position: relative;top: -10px;right: -4px;width: 100px;margin-right: 15px;cursor: pointer;color: #606266;">欢迎您，{{ teacherName }}</b>
        <el-avatar style="margin-top: 9px;margin-right: 15px;cursor: pointer;"
                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </span>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/teacherHome">
              <el-dropdown-item icon="el-icon-star-on">&nbsp;&nbsp;&nbsp;主页</el-dropdown-item>
            </router-link>
            <router-link to="/teacherPeopleInfo">
              <el-dropdown-item icon="el-icon-user-solid">&nbsp;个人中心</el-dropdown-item>
            </router-link>
            <span @click="loginOut"><el-dropdown-item icon="el-icon-s-promotion">&nbsp;&nbsp;&nbsp;退出</el-dropdown-item></span>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Top',
  data () {
    return {
      teacherName: ''
    }
  },
  created () {
    this.teacherName = JSON.parse(localStorage.getItem('teacher')).teacherName
  },
  methods: {
    loginOut () {
      // 退出登录，清空浏览器缓存
      localStorage.setItem('teacher', '')
      // 清空vuex信息
      this.$store.commit('setTeacher', '')
      this.$message({
        message: '恭喜你，成功退出',
        type: 'success'
      })
      // 退出跳转至首页
      this.$router.push({path: '/'})
    }
  }
}
</script>

<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }

</style>
